Badge component

Badges are used to highlight an item's status for quick recognition.

Status Badge

To use status badge add class name badgeto a div tag which is inside a div with a class name badge-containeralong with an avatar component. For different status add class name accordingly color-bg-success, color-bg-offline, color-bg-error.

profile-photo
profile-photo
profile-photo
profile-photo

Icon Badge

To use icon badge add class name badge-iconto a div tag which is inside a div with a class name badge-container along with an icon. For different status add class names color-bg-success, color-bg-offline, color-bg-erroraccordingly. For small size icon use badge-smallclass name with badge-icon.

6
18
99+
522
2

Text Badge

To use text badge add class name badge-textuse class name round-pillfor rounded pill badge.

Example of Heading with Badge New

Example of Heading with Badge New

Example of paragraph with Badge New

Example of small text with Badge New